<template>
  <div class="contact-detail">
    <!-- 返回按钮 -->
    <div class="back-button" @click="router.go(-1)">
      <el-icon><ArrowLeft /></el-icon>
    </div>

    <!-- 详细信息 -->
    <div class="profile">
      <img :src="contact.avatar" class="avatar">
      <h2 class="name">{{ contact.name }}</h2>
      <p class="wechat-id">微信号：{{ contact.wechatId }}</p>
    </div>

    <!-- 操作按钮 -->
    <div class="actions">
      <el-button type="primary" @click="startChat">
        <el-icon><ChatLineRound /></el-icon>
        发消息
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ArrowLeft, ChatLineRound } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 根据路由参数获取联系人信息
const contact = computed(() => {
  return {
    id: route.params.userId,
    name: '张三',
    avatar: '/avatars/1.jpg',
    wechatId: 'zhangsan2023'
  }
})

// 发起聊天
const startChat = () => {
  router.push({
    name: 'ChatSession',
    params: { chatId: `user_${contact.value.id}` }
  })
}
</script>

<style scoped>
.contact-detail {
  height: 100%;
  padding: 20px;
  position: relative;
}

.back-button {
  position: absolute;
  left: 20px;
  top: 20px;
  cursor: pointer;
  font-size: 18px;
  color: #666;
}

.profile {
  text-align: center;
  padding-top: 40px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.name {
  font-size: 24px;
  margin-bottom: 8px;
}

.wechat-id {
  color: #666;
  font-size: 14px;
}

.actions {
  margin-top: 30px;
  text-align: center;
}
</style>